<style>
#div-01 {
  margin-bottom: 10px;
}
#div-02 {
  border-top: 3px solid #0066ff;
  border-bottom: 3px solid #0066ff;
  border-left: 3px solid #0066ff;
  border-right: 3px solid #0066ff;
  background: #dff1f8;
  color: #fff;
  margin-bottom: 30px;
  width: 800px;
}
#div-02-01 {
  margin-bottom: 30px;
}
#div-02-02 {
  width: 40%;
}
#div-02-03 {
  width: 40%;
}
#div-03 {
  float: right;
  width: 50%;
}
</style>
<template>
  <div>
    <div id="div-01">
      <el-tooltip
        class="item"
        effect="dark"
        content="権限新規追加"
        placement="top-start"
      >
        <el-button>権限新規追加</el-button>
      </el-tooltip>
    </div>

    <div id="div-02">
      <div id="div-02-01">
        <el-tooltip
          class="item"
          effect="dark"
          content="*は入力必須です。"
          placement="top-start"
        >
          <el-button>*は入力必須です。</el-button>
        </el-tooltip>
      </div>

      <el-form ref="form" :model="form" label-width="80px">
        <div id="div-02-02">
          <el-form-item label="コード" prop="authorityCode">
            <el-input
              v-model="form.authorityCode"
              placeholder="000"
              disabled="true"
            >
            </el-input>
          </el-form-item>
        </div>

        <div id="div-02-03">
          <el-form-item label="権限名称*" prop="authorityName">
            <el-input
              v-model="form.authorityName"
              placeholder="ください入力"
            ></el-input>
          </el-form-item>
        </div>

        <div id="div-02-04">
          <el-form-item label="権限機能*">
            <el-checkbox-group v-model="form.type">
              <el-checkbox label="社員管理" name="type"></el-checkbox>
              <el-checkbox label="照会機能" name="type"></el-checkbox>
              <el-checkbox label="承認機能" name="type"></el-checkbox>
              <el-checkbox label="グループ管理" name="type"></el-checkbox>
              <el-checkbox label="ログ情報管理" name="type"></el-checkbox>
              <el-checkbox label="フロー作成機能" name="type"></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </div>
      </el-form>
    </div>

    <div id="div-03">
      <el-row>
        <el-button type="info" round size="medium">戻る</el-button>
        <el-button type="primary" @click="Submit('from')" round size="medium"
          >保存</el-button
        >
      </el-row>
    </div>
  </div>
</template>
<script>
export default {
  mounted() {
    this.Submit("from");
  },
  data() {
    return {
      form: {
        authorityCode: "",
        authorityName: "",
        type: [],
      },
    };
  },
  methods: {
    Submit(formdata) {
      this.$http
        .post("http://127.0.0.1:8089/bff/authority/add", this.form)
        .then((res) => {
          if (res.data.resultDto == 1) {
            alert("成功を追加します");
            window.location = "http://localhost:8080/#/FormSelect";
          } else {
            alert(res.data.resultDto);
            this.form.authorityCode = res.data.resultDto;
          }
        });
    },
  },
};
</script>
